<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title id="title">修德抄经堂</title>
    <link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.css">
    <link rel="stylesheet" type="text/css" href="../css/cehua.css">
    <link rel="stylesheet" type="text/css" href="../css/boruo.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/full.css">
    <script src="../bower_components/mui/dist/js/mui.min.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>
</head>

<body>

    <div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
        <aside class="mui-off-canvas-left" id="offCanvasSide" style="visibility: visible;">
            <div class="mui-scroll-wrapper" style="overflow: visible;">
                <div id="cehua" class="mui-scroll">
                    <ul>
                        <a href="boruo.html">
                            <li style="margin-top: 0;">
                                <img src="../img/banruo.png" class="cover">
                                <p class="same color">般若</p>
                            </li>
                        </a>
                        <a href="jingjin.html">
                            <li>
                                <img src="../img/jingjin.png" class="cover">
                                <p class="same color">精进</p>
                            </li>
                        </a>
                        <a href="bushi.html">
                            <li>
                                <img src="../img/shiyuan.png" class="cover">
                                <p class="same color">施愿</p>
                            </li>
                        </a>
                        <a href="benxin.html">
                            <li>
                                <img src="../img/benxin.png" class="cover">
                                <p class="same color">本心</p>
                            </li>
                        </a>
                    </ul>

                    <!-- <img id="erduo" src="../img/shuxie/tishi.png"> -->
                    <div id="erduo"></div>
                </div>
            </div>
        </aside>
        <div class="mui-inner-wrap">
            <div class="page">
                <bg class="bg"><img src="../img/bkca.png"></bg>
                <div class="content">
                    <a href="./search.html">
                        <div class="sousuo">
                            <span><img src="../img/bore/search.png" class="cover"></span>
                            <span>输入经书名称或关键字</span>
                        </div>
                    </a>
                    <div class="main">
                        <div class="left">
                            <p id="show-btn" class="same">般<br/>若</p>
                            <img src="../img/banruo.png">
                        </div>
                        <div class="right clearfix">
                            <div class="mui-scroll-wrapper" style="top:50px;left:25%;height:85%;width:71%;padding: 0px;border: 3px solid #253146;background: #172234;">
                                <div class="mui-scroll" style="right:7px;padding: 10px 0px 20px 0px;box-sizing: border-box;" id="booklist">
                                    <!--<div class="book-item"><a href="jingshujieshao.html"><img src="../img/bore/book.png"/></a></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                    <!--<div class="book-item"><img src="../img/bore/book.png"/></div>-->
                                </div>
                                <div class="more-book"><img class="more" src="../img/bore/more.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../js/common.js"></script>
<script>
//    $('.main .right').width($('.main').width() - $('.main .left').width());

//    $('#book').height($("#book li").height() * 3 + 7 * 2);
//    $('.main .right ul li:even').css('float', "right");
    //动态生成列表页
    var html = '';
    $.ajax({
        url: '/fe/sutra/list',
        data: {
            "limit": 10,
            "offset": 0,
        },
        success: function (data) {
            var items = data.data || [];
            for(var i=0,len=items.length;i<len;i++ ){
                html += '<div class="book-item">'
                    + '<a href="jingshujieshao.html?id='+items[i].id+'" data-name="'+items[i].name+'">'
                    + '<img src="'+items[i].cover_url+'"/>'
                    + '</a></div>'
            }
            $('#booklist').append(html);
        },
        error: function (error) {
            console.log(error)
        }
    })

    $(".sousuo").click(function () {

        location.href = './search.html'
    });

    $(".sousuo").click(function () {
        location.href = './search.html'
    });

//    $(".bookPanel li").click(function () {
//        location.href = './jingshujieshao.html';
//    });

    mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: true, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
    });


    mui('body').on('tap','a',function(){document.location.href=this.href;});

</script>

</html>